<template>
  <div>
    <el-form :model="form" :ref="relForm" :rules="rules" class="demo-ruleForm" v-bind="$attrs">
      <template v-for="(item,index) in formNodeList">
        <el-form-item :key="index" :label="item.label" :prop="item.prop" :labelWidth="labelWidth">
          <span style="padding:0px 5px">{{item.before}}</span>
          <!-- input -->
          <el-input
            v-if="item.type === 'input'"
            :placeholder="item.placeholder"
            v-model="form[item.prop]"
            :type="item.inputType"
            :min="item.min"
            :max="item.max"
            :maxlength="item.maxlength"
            :style="item.style"
            :autosize="item.autosize"
            v-bind="$attrs"
            :size="item.size"
            :disabled="item.disabled"
            @change="inputChange(item.change,$event)"
            @blur="inputBlur(item.blur,$event)"
          ></el-input>
          <!-- input-number -->
          <el-input-number
            v-if="item.type === 'input-number'"
            :placeholder="item.placeholder"
            v-model="form[item.prop]"
            :type="item.inputType"
            :min="item.min"
            :max="item.max"
            :precision="item.precision"
            :step="item.step"
            :step-strictly="item.stepStrictly"
            :maxlength="item.maxlength"
            :style="item.style"
            :controls-position="item.controlsPosition"
            :autosize="item.autosize"
            v-bind="$attrs"
            :size="item.size"
            :disabled="item.disabled"
            @change="inputNumberChange(item.change,$event)"
            @blur="inputNumberBlur(item.blur,$event)"
          ></el-input-number>
          <!-- select -->
          <el-select
            v-model="form[item.prop]"
            :placeholder="item.placeholder"
            v-if="item.type === 'select'"
            :style="item.style"
            :size="item.size"
            @change="selectChange(item.change,$event)"
            :disabled="item.disabled"
          >
            <el-option :label="i.label" :value="i.value" v-for="i in item.option" :key="i.value"></el-option>
          </el-select>
          <!-- checkbox -->
          <el-checkbox-group
            v-model="form[item.prop]"
            v-if="item.type === 'checkbox'"
            :style="item.style"
            :size="item.size"
            :disabled="item.disabled"
            @change="checkboxChange(item.change,$event)"
          >
            <el-checkbox
              :label="i.value"
              v-for="i in item.checkboxValue"
              :key="i.value"
              name="type"
            >{{i.label}}</el-checkbox>
          </el-checkbox-group>
          <!-- radio -->
          <el-radio-group
            v-model="form[item.prop]"
            :style="item.style"
            :size="item.size"
            v-if="item.type === 'radio'"
            :disabled="item.disabled"
            @change="radioChange(item.change,$event)"
          >
            <el-radio :label="i.value" v-for="i in item.radioValue" :key="i.value">{{i.label}}</el-radio>
          </el-radio-group>
          <!-- data-picker -->
          <el-date-picker
            v-if="item.type === 'data-picker'"
            v-model="form[item.prop]"
            :type="item.inputType"
            range-separator="至"
            :start-placeholder="item.startPlaceholder"
            :end-placeholder="item.endPlaceholder"
            :style="item.style"
            :size="item.size"
            :format="item.format"
            :value-format="item.valueFormat"
            :default-time="item.defaultTime"
            @change="dataPickerChane(item.change,$event)"
          ></el-date-picker>
          <span style="padding:0px 5px">{{item.after}}</span>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    formNodeList: {
      type: [Object, Array],
      default: () => {}
    },
    form: {
      type: Object,
      default: {}
    },
    rules: {
      type: Object,
      default: {}
    },
    relForm: {
      type: String,
      default: ""
    },
    labelWidth: {
      type: String,
      default: ""
    }
  },
  data() {
    return {};
  },
  methods: {
    inputChange(change, e) {
      if (typeof change === "function") {
        change(e);
      }
    },
    inputBlur(blur, e) {
      if (typeof blur === "function") {
        blur(e);
      }
    },
    inputNumberChange(change, e) {
      if (typeof change === "function") {
        change(e);
      }
    },
    inputNumberBlur(blur, e) {
      if (typeof blur === "function") {
        blur(e);
      }
    },
    selectChange(change, e) {
      if (typeof change === "function") {
        change(e);
      }
    },
    checkboxChange(change, e) {
      if (typeof change === "function") {
        change(e);
      }
    },
    radioChange(change, e) {
      if (typeof change === "function") {
        change(e);
      }
    },
    dataPickerChane(change, e) {
      if (typeof change === "function") {
        change(e);
      }
    }
  }
};
</script>
<style>
</style>